<template>
  <el-form-item v-bind="createFormItemProps(props.config)">
    <component :is="props.config.type" v-model="value" v-bind="createFormComponentProps(props.config)">
      <template v-if="props.config.type === 'el-select'">
        <el-option v-for="o in props.config.options" :value="o.value" :label="o.label" />
      </template>
      <template v-if="props.config.type === 'el-radio-group'">
        <el-radio v-for="o in props.config.options" :value="o.value">{{ o.label }}</el-radio>
      </template>
      <template v-if="props.config.type === 'el-checkbox-group'">
        <el-checkbox v-for="o in props.config.options" :value="o.value">{{ o.label }}</el-checkbox>
      </template>
    </component>
  </el-form-item>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, watch } from 'vue'
const props = defineProps({
  labelWidth: { type: String },
  config: { type: Object, default: () => ({}) },
  modelValue: { type: String || Array || Object },
})
const emit = defineEmits(['update:modelValue'])
const value = ref(props.modelValue)
watch(() => value.value, newValue => {
  emit('update:modelValue', newValue)
}, { deep: true })
const createFormItemProps = (config: any) => {
  const { label, prop } = config
  const resutl: any = {
    prop,
    label,
    rules: [{ required: true, message: '请输入' + label, trigger: 'blur' }]
  }
  if (props.labelWidth) {
    resutl.labelWidth = props.labelWidth
  }
  return resutl
}
const createFormComponentProps = (config: any) => {
  return {
    placeholder: '请输入' + config.label,
    ...config.props
  }
}
</script>